<link rel="preload"> - mrsekut-p

<link rel="preload">

<head>内に書く

乱用しないように気をつける

本当に重要なものにのみ指定する

例えば、Largest Contentful Paint(LCP)に関わるものなど

例

code:html

<head>

<link rel="preload" as="script" href="critical.js">

</head>

参考

重要なアセットをプリロードして、読み込み速度を向上させる

as

ブラウザはプリフェッチされたリソースのタイプに応じて優先度を設定し、適切なヘッダーを設定し、リソースがキャッシュにすでに存在するかどうかを判断するのに役立つ

必須

script

style

font

iamge

crossorigin

crossorigin属性なしでpreloadされたfontは2回fetchされる

https://web.dev/preload-critical-assets/#relpreload:~:text=crossorigin属性なしでプリロードされたフォントは2回フェッチされ

https://developer.mozilla.org/ja/docs/Web/HTML/Element/link#attributes

https://developers.google.com/web/updates/2017/12/modulepreload

https://blog.jxck.io/entries/2016-03-04/preload.html